<template>
    <div @wheel.prevent="mouseWheel" class="fullpage">
        <!--指示器-->
        <div class="fixed__indicatorsBox" :style="indicatorsBoxStyle">
            <div @click="goto(index)" :class="{'active_indicator':currentIndex === index}" class="indicator"
                 v-for="(item,index) in pageList" :key="index">
            </div>
        </div>
        <slot></slot>
    </div>
</template>
<script>
    export default {
        name: "s-fullpage",
        props: {
            // 默认显示页
            activePage: String,
            // 指示器的位置
            indicatorPosition: {
                type: String,
                default: 'right'
            }
        },
        mounted() {
            if (this.indicatorPosition === 'right') {
                this.$set(this.indicatorsBoxStyle, 'right', 0)
            } else if (this.indicatorPosition === 'left') {
                this.$set(this.indicatorsBoxStyle, 'left', 0)
            }
            this.$slots.default.forEach(item => {
                this.pageList.push(item.componentOptions.propsData.page)
            })
            if (!this.activePage && this.pageList.length > 0) {
                this.currentPage = this.pageList[0]
            } else {
                this.currentPage = this.activePage
                this.pageList.forEach((item, index) => {
                    if (this.currentPage === item) {
                        this.currentIndex = index
                    }
                })
            }
        },
        data() {
            return {
                indicatorsBoxStyle: {},
                // 所有页构成的列表
                pageList: [],
                // 当前显示页
                currentPage: '',
                // 当前显示页的下标
                currentIndex: 0,
                // 鼠标滑轮滚动的方向
                direction: '',
                // 鼠标滑轮事件开始时间
                startTime: '',
                // 鼠标滑轮指令执行结束时间
                endTime: '',
            }
        },
        methods: {
            // 页面跳转
            goto(index) {
                this.currentIndex = index
                this.currentPage = this.pageList[index]
            },
            // 鼠标滑轮滚动事件
            mouseWheel(e) {
                this.startTime = new Date().getTime()
                // 每次滚动事件触发1s后，才会再次触发（避免鼠标滚动事件连续触发）
                if (this.startTime - this.endTime > 1000) {
                    e = e || window.event;
                    if (e.wheelDelta) {  //IE，谷歌浏览器滑轮事件
                        if (e.wheelDelta > 0) {
                            // 向上滚动
                            this.previousPage()
                        }
                        if (e.wheelDelta < 0) {
                            // 向下滚动
                            this.nextPage()
                        }
                    } else if (e.detail) {  //Firefox滑轮事件
                        if (e.detail > 0) {
                            // 向上滚动
                            this.previousPage()
                        }
                        if (e.detail < 0) {
                            // 向下滚动
                            this.nextPage()
                        }
                    }
                }
            },
            previousPage() {
                this.direction = 'up'
                this.currentIndex -= 1
                // 第1页时，禁止继续向上翻页
                if (this.currentIndex < 0) {
                    this.currentIndex = 0
                }
                this.currentPage = this.pageList[this.currentIndex]
                this.endTime = new Date().getTime()
            },
            nextPage() {
                this.direction = 'down'
                this.currentIndex += 1
                // 最后一页时，禁止继续向下翻页
                if (this.currentIndex > this.pageList.length - 1) {
                    this.currentIndex = this.pageList.length - 1
                }
                this.currentPage = this.pageList[this.currentIndex]
                this.endTime = new Date().getTime()
            },
        }
    }
</script>
<style scoped>
    /*指示器容器的样式*/
    .fixed__indicatorsBox {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        z-index: 999;
    }
 
    /*指示器的样式*/
    .indicator {
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: white;
        opacity: 0.3;
        margin: 10px;
        cursor: pointer;
    }
 
    /*当前指示器的样式*/
    .active_indicator {
        opacity: 1;
        box-shadow: 0px 0px 8px 2px white;
    }
 
    .fullpage {
        height: 100vh;
        width: 100vw;
        color: white;
        background: black;
        position: relative;
        /*隐藏滚动条*/
        overflow: hidden;
    }
 
    /*滑出——从上方*/
    .slidOutFromTop {
        animation: slidOutFromTop 1s;
    }
 
    @keyframes slidOutFromTop {
        from {
            top: 0;
        }
        to {
            top: -100%;
        }
    }
 
    /*滑出——从下方*/
    .slidOutFromBottom {
        animation: slidOutFromBottom 1s;
    }
 
    @keyframes slidOutFromBottom {
        from {
            top: 0;
        }
        to {
            top: 100%;
        }
    }
 
 
    /*滑入——从上方*/
    .slidInFromTop {
        animation: slidInFromTop 1s;
    }
 
    @keyframes slidInFromTop {
        from {
            top: -100%;
        }
        to {
            top: 0;
        }
    }
 
    /*滑入——从下方*/
    .slidInFromBottom {
        animation: slidInFromBottom 1s;
    }
 
    @keyframes slidInFromBottom {
        from {
            top: 100%;
        }
        to {
            top: 0;
        }
    }
</style>